<template>
  <div id="state">
    <div class="processstate" v-for="(item, index) in statedata" :key="index">
      <div class="left" v-for="(rol, i) in item.process" :key="i">
        <p class="num">{{ rol.name }}</p>
        <span class="value">{{ rol.value }}</span>
      </div>
    </div>
    <div class="process">
      <div class="title">
        <p class="name">流程名称</p>
        <p class="time">开始时间</p>
        <p class="time">执行人</p>
        <p class="result">执行结果</p>
      </div>
      <div v-for="(a, b) in definitiondata" :key="b">
        <div class="print" v-for="(m, n) in a.defint" :key="n">
          <div v-if="m.state === 0" class="printo">
            <p class="nameo">{{ m.name }}</p>
            <p class="timeo">{{ m.time }}</p>
            <p class="timeo">{{ m.person }}</p>
            <p class="resulto" v-if="m.state === 0">
              <img src="../assets/v4_成功.png" />
            </p>
            <p class="resulto" v-else-if="m.state === 1">
              <img src="../assets/v4_失败.png" />
            </p>
          </div>
          <div v-if="m.state === 1" class="printw">
            <p class="nameo">{{ m.name }}</p>
            <p class="timeo">{{ m.time }}</p>
            <p class="timeo">{{ m.person }}</p>
            <p class="resulto" v-if="m.state === 0">
              <img src="../assets/v4_成功.png" />
            </p>
            <p class="resulto" v-else-if="m.state === 1">
              <img src="../assets/v4_失败.png" />
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "State",
  props: {
    statedata: {
      type: Array,
      default: () => [],
    },
    definitiondata: {
      type: Array,
      default: () => [],
    },
  },
};
</script>
<style lang="less" scoped>
.processstate {
  height: 114px;
  margin-top: 55px;
  margin-left: 5px;
  display: flex;
  justify-content: center;
  flex-direction: row;
  margin-left: 10px;
}
.left {
  width: 150px;
  height: 114px;
  margin-right: 55px;
  text-align: center;
}
.num {
  font-size: 25px;
  color: #00f0ff;
  margin: 0;
  padding: 0;
}
.value {
  font-size: 60px;
  color: #ff9c00;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  line-height: 90px;
  background-image: -webkit-linear-gradient(90deg, #fbe501, #ff9c00);
  background-image: -webkit-linear-gradient(90deg, #fbe501, #ff9c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.process {
  width: 791px;
  height: 610px;
  margin-top: 48px;
  margin-left: 29px;
}
.title {
  width: 791px;
  height: 57px;
  display: flex;
  justify-content: center;
}
.name {
  flex-direction: row;
  justify-content: center;
  width: 120px;
  height: 57px;
  font-size: 28px;
  color: #d2eaff;
  margin: 0;
  padding: 0;
  margin-right: 87px;
  text-align: center;
  line-height: 54px;
  margin-left: 25px;
}
.time {
  width: 120px;
  height: 57px;
  font-size: 28px;
  color: #d2eaff;
  margin: 0;
  padding: 0;
  margin-right: 87px;
  text-align: center;
  line-height: 54px;
}
.result {
  width: 120px;
  height: 57px;
  font-size: 28px;
  color: #d2eaff;
  margin: 0;
  padding: 0;
  margin-right: 25px;
  text-align: center;
  line-height: 54px;
}
.print {
  width: 775px;
  height: 85px;
  display: flex;
  justify-content: center;
  margin-left: 8px;
  margin-top: 25px;
  // background: url(../assets/v4_red.gif);
  // background: url(../assets/v4_blue.png);
}
.nameo {
  flex-direction: row;
  justify-content: center;
  width: 120px;
  height: 87px;
  font-size: 28px;
  color: #d2eaff;
  margin: 0;
  padding: 0;
  margin-right: 87px;
  text-align: center;
  line-height: 84px;
  margin-left: 18px;
  z-index: 100;
}
.timeo {
  width: 120px;
  height: 87px;
  font-size: 28px;
  color: #d2eaff;
  margin: 0;
  padding: 0;
  margin-right: 87px;
  text-align: center;
  line-height: 84px;
}
.resulto {
  width: 120px;
  height: 87px;
  font-size: 28px;
  color: #d2eaff;
  margin: 0;
  padding: 0;
  margin-right: 25px;
  text-align: center;
  margin: 0 auto;
  line-height: 84px;
}
img {
  margin: 0 auto;
  vertical-align: middle;
}
.printo {
  width: 775px;
  height: 85px;
  display: flex;
  justify-content: center;
  margin-left: 3px;
  margin-top: 0px;
  background: url(../assets/v4_blue.png);
}
.printw {
  width: 775px;
  height: 85px;
  display: flex;
  justify-content: center;
  margin-left: 3px;
  margin-top: 0px;
  background: url(../assets/v4_red.gif);
}
</style>
